<template>
  <el-dialog :visible.sync="isShowDetail">
    <div class="detail-container">
      <div class="oilNum-wrapper">
        <div class="oilNum-title">
          <div class="title-color"></div>
          <div class="title-text">订单信息</div>
        </div>
        <!-- 船舶待支付订单信息 -->
        <template v-if="orderPayFlag === 0 && isShipStation">
          <el-table
            v-loading="loading" 
            size="small" 
            :data="orderInfo" 
            stripe
            border
            style="width: 100%"
          >
            <el-table-column
              prop="orderId"
              label="订单号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderDt"
              label="下单时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderDt| formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderPayFlagName"
              label="订单状态"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderPayFlagName}}
              </template>
            </el-table-column>
            <el-table-column
              prop="priceGun"
              label="油品单价"
              align="center">
            </el-table-column>
          </el-table>
        </template>
        <!-- 油站订单信息 -->
        <template v-else>
          <el-table 
            v-loading="loading" 
            size="small" 
            :data="orderInfo" 
            stripe
            border
            style="width: 100%"
            >
            <el-table-column
              prop="orderId"
              label="订单号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderDt"
              label="下单时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderDt| formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
              </template>
            </el-table-column>
            <el-table-column
              prop="payDt"
              label="支付时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.payDt | formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderSourceName"
              label="订单来源"
              align="center">
            </el-table-column>
          </el-table>
          <el-table 
            v-loading="loading" 
            size="small" 
            :data="orderInfo" 
            stripe
            border
            style="width: 100%"
            >
            <el-table-column
              prop="payTypeName"
              label="支付方式"
              align="center">
            </el-table-column>
            <el-table-column
              prop="orderPayFlagName"
              label="订单状态"
              align="center">
            </el-table-column>
            <el-table-column
              prop="refundReason"
              label="退款原因"
              align="center">
            </el-table-column>
            <el-table-column
              prop="refundDt"
              label="退款时间"
              align="center">
              <template slot-scope="scope">
                {{scope.row.refundDt | formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
              </template>
            </el-table-column>
          </el-table>
          <el-table 
            v-loading="loading" 
            size="small" 
            :data="orderInfo" 
            stripe
            border>
            <el-table-column
              prop="gasName"
              label="所属油站"
              align="center"
              min-width="25%">
            </el-table-column>
            <el-table-column min-width="75%">
            </el-table-column>
          </el-table>
        </template>
      </div>

      <div class="oilNum-wrapper">
        <div class="oilNum-title">
          <div class="title-color"></div>
          <div class="title-text">支付信息</div>
        </div>
        <!-- 船舶待支付订单支付信息 -->
        <template v-if="orderPayFlag === 0 && isShipStation">
          <el-table
            v-loading="loading" 
            size="small" 
            :data="payInfo" 
            stripe
            border
            style="width: 100%"
          >
            <el-table-column
              prop="amountGun"
              label="加油金额"
              align="center">
            </el-table-column>
            <el-table-column
              prop="oilNumName"
              label="油号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="gunNo"
              label="枪号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="litre"
              label="升数"
              align="center">
            </el-table-column>
          </el-table>
          <el-table
            v-loading="loading" 
            size="small" 
            :data="payInfo" 
            highlight-current-row
            stripe
            border
          >
            <el-table-column
              prop="ton"
              label="吨数"
              align="center"
              min-width="25%">
            </el-table-column>
            <el-table-column min-width="75%">
            </el-table-column>
          </el-table>
        </template>
        <!-- 油站订单支付信息 -->
        <template v-else>
          <el-table 
            v-loading="loading" 
            size="small" 
            :data="payInfo" 
            stripe
            border
            style="width: 100%"
            >
            <el-table-column
              prop="amountGun"
              label="加油金额"
              align="center">
            </el-table-column>
            <el-table-column
              prop="rebate"
              label="让利金额"
              align="center">
            </el-table-column>
            <el-table-column
              prop="oilNumName"
              label="油品号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="litre"
              label="加油升数"
              align="center">
            </el-table-column>
          </el-table>
          <el-table 
            v-loading="loading" 
            size="small" 
            :data="payInfo" 
            stripe
            border
            style="width: 100%"
            >
            <el-table-column
              prop="ton"
              label="吨数"
              align="center"
              v-if="isShipStation"
              min-width="25%">
            </el-table-column>
            <el-table-column
              prop="gunNo"
              label="油枪号"
              align="center"
              min-width="25%">
            </el-table-column>
            <el-table-column
              prop="merchantCouponAmount"
              label="商家券"
              align="center"
              min-width="25%">
            </el-table-column>
            <el-table-column
              prop="activityAmountFromMt"
              label="商家承担直降金额"
              align="center"
              min-width="25%">
            </el-table-column>
            <!-- <el-table-column min-width="50%">
            </el-table-column> -->
          </el-table>
          <el-table
            v-loading="loading" 
            size="small" 
            :data="payInfo" 
            highlight-current-row
            stripe
            border
          >
            <el-table-column
              prop="pltCouponAmountFromMt"
              label="商家承担平台优惠券金额"
              align="center"
              min-width="25%">
            </el-table-column>
            <el-table-column min-width="75%">
            </el-table-column>
          </el-table>
        </template>
      </div>

      <div class="oilNum-wrapper">
        <div class="oilNum-title">
          <div class="title-color"></div>
          <div v-if="orderPayFlag === 0 && isShipStation" class="title-text">用户信息</div>
          <div v-else class="title-text">司机信息</div>
        </div>
        <!-- 船舶待支付订单显示用户信息 -->
        <el-table 
          v-if="orderPayFlag === 0 && isShipStation"
          v-loading="loading" 
          size="small" 
          :data="driverInfo" 
          highlight-current-row
          stripe
          border
          >
          <el-table-column
            prop="phone"
            label="手机号码"
            align="center"
            min-width="25%">
            <template slot-scope="scope">
            {{scope.row.phone | hidePhoneFourRank}}
            </template>
          </el-table-column>
          <el-table-column min-width="75%">
          </el-table-column>
        </el-table>
        <!-- 油站订单显示司机信息 -->
        <el-table
          v-else
          v-loading="loading" 
          size="small" 
          :data="driverInfo" 
          highlight-current-row
          stripe
          border
          >
          <el-table-column
            prop="phone"
            label="用户手机号"
            align="center"
            min-width="25%">
            <template slot-scope="scope">
            {{scope.row.phone | hidePhoneFourRank}}
            </template>
          </el-table-column>
          <el-table-column min-width="75%">
          </el-table-column>
        </el-table>
      </div>

      <div class="oilNum-wrapper" v-if="isShipStation">
        <div class="oilNum-title">
          <div class="title-color"></div>
          <div class="title-text">预约信息</div>
        </div>
        <el-table 
          v-loading="loading" 
          size="small" 
          :data="orderMsg" 
          highlight-current-row
          stripe
          border
          >
          <el-table-column
            prop="reservationOrderDt"
            label="预约时间"
            align="center"
            min-width="25%">
          </el-table-column>
          <el-table-column
            prop="reservationTon"
            label="预约加油量(吨)"
            align="center"
            min-width="25%">
          </el-table-column>
          <el-table-column
            prop="shipNumber"
            label="船名"
            align="center"
            min-width="25%">
          </el-table-column>
          <el-table-column
            prop="mmsi"
            label="MMSI"
            align="center"
            min-width="25%">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderDetail } from '@/api/order'
export default {
  name: 'orderDetail',
  props: ['orderId', 'isShipStation'],
  data () {
    return {
      flagsList: { // 订单状态列表
        1: '已支付',
        4: '退款中',
        5: '已退款',
        6: '退款失败'
      }, 
      isShowDetail: false,
      loading: false,
      orderInfo: [{
        orderId: '',
        orderDt: '',
        payDt: '',
        orderSourceName: '',
        payTypeName: '',
        orderPayFlagName: '',
        refundReason: '',
        refundDt: '',
        gasName: '',
        priceGun: ''
      }],
      payInfo: [{
        amountGun: 0,
        rebate: 0,
        oilNumName: '',
        gunNo: 0,
        litre: 0,
        ton: 0,
        merchantCouponAmount: 0, // 商家券
        activityAmountFromMt: 0,
        pltCouponAmountFromMt: 0
      }],
      driverInfo: [{
        phone: ''
      }],
      orderMsg: [{
        shipNumber: '',
        mmsi: '',
        reservationTon: '',
        reservationOrderDt: ''
      }],
      orderPayFlag: null
    }
  },
  watch: {
    isShowDetail (val) {
      if (val) {
        this.getOrderDetail()
      } else {
        this.init()
      }
    }
  },
  methods: {
    init () {
      this.orderInfo = [{
        orderId: '',
        orderDt: '',
        payDt: '',
        orderSourceName: '',
        payTypeName: '',
        orderPayFlagName: '',
        refundReason: '',
        refundDt: '',
        gasName: '',
        priceGun: ''
      }]
      this.payInfo = [{
        amountGun: 0,
        rebate: 0,
        oilNumName: '',
        gunNo: 0,
        litre: 0,
        ton: 0,
        merchantCouponAmount: 0,
        activityAmountFromMt: 0,
        pltCouponAmountFromMt: 0
      }],
      this.driverInfo = [{
        phone: ''
      }],
      this.orderMsg = [{
        shipNumber: '',
        mmsi: '',
        reservationTon: '',
        reservationOrderDt: ''
      }]
    },
    async getOrderDetail () {
      this.loading = true
      try {
        const { code, result } = await getOrderDetail({
          orderId: this.orderId
        })
        if (code !== 200) return
        let obj = {orderInfo: {...this.orderInfo[0]}, payInfo: {...this.payInfo[0]}, driverInfo: {...this.driverInfo[0]}, orderMsg: { ...this.orderMsg[0] }}
        for (let i in obj) {
          this[i].splice(0,1,this.setObj(obj[i], result))
        }
        this.orderPayFlag = result.orderPayFlag
      } catch (error) {
        console.log(error.message)
      } finally {
        this.loading = false
      }
    },
    setObj (obj, result) {
      for (let key in obj) {
        if (result[key] !== null) {
          obj[key] = result[key]
        } else {
          obj[key] = '--'
        }
      }
      return obj
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./styles/detail.less');
</style>
